<template>
  <div class="fund">
    <div class="header">
      <top-bar :barObj="barObj"/>
    </div>
    <div class="content">
      <div class="tab">
        <div class="arrow-up"></div>
        <div class="item" v-for="(item, i) in tabArr" :key="i" @click="clickTabItem(item)">
          <img :src="item.id == tabItemActive ? item.img1 : item.img0" alt>
          <div class="txt">{{ item.txt }}</div>
        </div>
      </div>
      <ul>
        <li v-for="(item,idx) in fundList" :key="idx">
          <div class="main">
            <div class="mian_left">
              <!-- -->
              <img :src="item.value3" alt>
              <!-- <img src="./img/haiwant_icon.png" alt> -->
            </div>
            <div class="mian_right">
              <div class="rigth_item rigth_item1">
                <div class="title">
                  <div class="item">{{item.value2}}</div>
                  <div class="item" :class="time" style="text-align:right">
                    <img v-if="tabItemActive==1" src="./img/time_icon_1.png" alt>
                    <img v-if="tabItemActive==2" src="./img/time_icon_2.png" alt>
                    <img v-if="tabItemActive==3" src="./img/time_icon_3.png" alt>
                    {{item.value9.split(' ')[0].split('/').join('-')}}
                  </div>
                </div>
                <p>
                  <span v-if="item.value4== 0 ">根据数据限额认购</span>
                  <span v-else>每个ID限购{{parseInt(item.value4)}}枚</span>
                  <!-- <span v-else>每个ID限购{{item.value4|toInt}}枚</span> -->
                  <span class="bili">释放比例{{ Number(item.value7).toFixed(3) }}%</span>
                </p>
                <p class="psType">
                  接收币种：
                  <span>PS</span>
                </p>
              </div>
              <div class="rigth_item rigth_item2">
                <div class="bm">
                  <div class="bmItem key">认购规模</div>
                  <div
                    class="bmItem val"
                    v-if="parseInt(item.value6) > 10000"
                  >{{parseInt(item.value6) / 10000 +'万'}}</div>
                  <div class="bmItem val" v-else>{{ parseInt(item.value6) }}</div>
                </div>
                <div class="bm">
                  <div class="bmItem key" style="text-align:center">价格</div>
                  <div
                    class="bmItem val"
                    style="text-align:center"
                  >1HIWANT={{ parseInt(item.value5) }}PS</div>
                </div>
                <div class="bm bm3">
                  <div class="bmItem key" style="text-align:center" v-if="tabItemActive==1">开始时间</div>
                  <div class="bmItem key" style="text-align:center" v-if="tabItemActive==2">剩余时间</div>
                  <div
                    class="bmItem val"
                    :class="time"
                    style="text-align:center"
                    v-if="tabItemActive==1"
                  >{{item.value8.split(' ')[0].replace('/','-')}}</div>
                  <div
                    class="bmItem val"
                    :class="time"
                    style="text-align:center"
                    v-if="tabItemActive==2"
                  >{{ new Date(item.value9) - +new Date() | countDown}}</div>
                  <span></span>
                </div>
              </div>
            </div>
          </div>
          <div class="btn" v-if="tabItemActive != 1">
            <div class="tiao">
              <div
                class="ing"
                :class="ingBg"
                :style="{width:item.value10 == 0 ? '0' : item.value10 / item.value6*100 +'%'}"
              ></div>
              <div class="ed"></div>
            </div>
            <span>{{ item.value10 == 0 ? '0' :( item.value10 / item.value6 *100).toFixed(2) }}%</span>
            <div class="btn_get" style="background:#727477" v-if="item.value11==0">立即购买</div>
            <div
              class="btn_get"
              :class="getBtnBg"
              v-else-if="item.value11!=0 && tabItemActive==2"
              @click="nowBuy(item)"
            >立即购买</div>
            <div class="btn_get" :class="getBtnBg" style="background:#727477" v-else>已结束</div>
          </div>
          <span v-if="tabItemActive==2" class="limit">剩余额度{{ parseInt(item.value11) }}PS</span>
        </li>
      </ul>
    </div>
    <div class="buyMask" v-show="isShowBuy">
      <div class="mian">
        <div class="title">
          <i class="iconfont icon-guanbi" @click="isShowBuy=false"></i>
          认购
        </div>
        <div class="txt">剩余额度{{parseInt(remainingAmount.value11)}}PS</div>
        <p>
          <label for="buyNumber">认购数量</label>
          <input type="text" id="buyNumber" v-model="buyNumber" placeholder="请输入认购数量">
        </p>
        <div>={{(parseInt(buyNumber / remainingAmount.value5 ))}} HIWANT</div>
        <div class="hiwaat">1HIWANT={{parseInt(remainingAmount.value5)}}PS</div>
        <div class="btn" @click="confirmBy">确认认购</div>
      </div>
    </div>
    <div class="payMask" v-if="isPayMask">
      <div class="mian">
        <div class="title">
          <i @click="isPayMask=false" class="iconfont icon-guanbi"></i> 请输入支付密码
        </div>
        <div class="content1">
          <div class="p">
            <div
              class="txt"
              v-if="parseInt(buyNumber / remainingAmount.value5)"
            >认购HIWANT {{(parseInt(buyNumber / remainingAmount.value5 ))}}个</div>
          </div>
          <div class="txt">
            <span class="ps">PS</span>
            <span>{{buyNumber}}</span>
          </div>
        </div>
        <div class="inputBox inputBox1" ref="inputBox">
          <!-- <input type="password" v-model="pws1" maxlength="1" @keydown="key_dow">
          <input type="password" v-model="pws2" maxlength="1">
          <input type="password" v-model="pws3" maxlength="1">
          <input type="password" v-model="pws4" maxlength="1">
          <input type="password" v-model="pws5" maxlength="1">
          <input type="password" v-model="pws6" maxlength="1">-->
          <input type="password" maxlength="6" v-model="passwordVal">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import topBar from "@/components/topBar.vue";
import { FundWelList, PayFundWel } from "../../api";
import { getGuid } from "../../utils/index";
import { Toast, MessageBox } from "mint-ui";
import { hex_md5 } from "../../utils/md5";

export default {
  name: "fund",
  data() {
    return {
      barObj: {
        isBack: true,
        backVal: "我",
        isIcon: true,
        title: "基金福利"
      },
      tabArr: [
        {
          img0: require("./img/Preheating_not selected.png"),
          img1: require("./img/Preheating_selected.png"),
          txt: "预热中",
          id: 1
        },
        {
          img0: require("./img/progress_not selected.png"),
          img1: require("./img/progress_selected.png"),
          txt: "进行中",
          id: 2
        },
        {
          img0: require("./img/end_not selected.png"),
          img1: require("./img/end_selected.png"),
          txt: "已结束",
          id: 3
        }
      ],
      tabItemActive: 1,
      isShowBuy: false,
      fundData: {},
      countDownTimer: null,
      remainingAmount: {},
      buyNumber: "",
      isPayMask: false,
      pwsVal: "",
      pws1: "",
      pws2: "",
      pws3: "",
      pws4: "",
      pws5: "",
      pws6: "",
      passwordVal: ""
    };
  },
  components: {
    topBar
  },
  filters: {
    toInt(value) {
      return parseInt(value);
    },
    countDown(msec) {
      let day = parseInt(msec / 1000 / 60 / 60 / 24);
      let hr = parseInt((msec / 1000 / 60 / 60) % 24);
      let min = parseInt((msec / 1000 / 60) % 60);
      let sec = parseInt((msec / 1000) % 60);
      hr = hr > 9 ? hr : "0" + hr;
      min = min > 9 ? min : "0" + min;
      sec = sec > 9 ? sec : "0" + sec;
      if (msec <= 0) {
        this.remain = "";
      }
      let remain = `${day}天${hr}小时${min}分`;
      return remain;
    }
  },
  computed: {
    time() {
      if (this.tabItemActive == 1) {
        return "time1";
      } else if (this.tabItemActive == 2) {
        return "time2";
      } else {
        return "time3";
      }
    },
    getBtnBg() {
      if (this.tabItemActive == 1) {
        return "btn_get1";
      } else if (this.tabItemActive == 2) {
        return "btn_get2";
      } else {
        return "btn_get3";
      }
    },
    ingBg() {
      if (this.tabItemActive == 1) {
        return "ing1";
      } else if (this.tabItemActive == 2) {
        return "ing2";
      } else {
        return "ing3";
      }
    },
    fundList() {
      if (this.tabItemActive == 1) {
        return this.fundData.list1;
      } else if (this.tabItemActive == 2) {
        return this.fundData.list2;
      } else {
        return this.fundData.list3;
      }
    }
  },
  mounted() {
    this.getFundWelList();
  },
  watch: {
    passwordVal(v1, v2) {
      if (v1.length == 6) {
        this.payFun();
        console.log("输入完成");
      }
    }
  },
  methods: {
    inputWrite(txts) {
      if (!this.$refs.inputBox) {
        return;
      }
      var txts = this.$refs.inputBox.getElementsByTagName("input");
      let _this = this;
      for (var i = 0; i < txts.length; i++) {
        var t = txts[i];
        t.index = i;
        t.setAttribute("readonly", true);
        t.onkeyup = function() {
          this.value = this.value.replace(/^(.).*$/, "$1");
          var next = this.index + 1;
          if (next > txts.length - 1) {
            console.log("提交");
            _this.payFun();
          }
          if (txts[next] == undefined) {
            return;
          }
          txts[next].removeAttribute("readonly");
          txts[next].focus();
        };
      }
      txts[0].removeAttribute("readonly");
    },
    getVal() {
      this.pwsVal =
        this.pws1 + this.pws2 + this.pws3 + this.pws4 + this.pws5 + this.pws6;
    },
    getFundWelList() {
      FundWelList({
        LoginMachine: getGuid(),
        ID: localStorage.zyUserId
      }).then(res => {
        if (res.data.Success) {
          this.fundData = res.data.EntityList[0];
        }
      });
    },
    clickTabItem(item) {
      this.tabItemActive = item.id;
      console.log(this.fundList);
    },
    nowBuy(item) {
      this.buyNumber = "";
      this.remainingAmount = item;
      this.isShowBuy = true;
    },
    confirmBy() {
      if (this.buyNumber <= 9) {
        Toast({
          message: "认购数量太少",
          duration: 2000
        });
        return;
      }
      this.passwordVal = "";
      this.isPayMask = true;
    },
    payFun() {
      this.isPayMask = false;
      console.log(this.passwordVal);
      PayFundWel({
        ID: localStorage.zyUserId,
        MC: this.remainingAmount.value1,
        MS: this.buyNumber,
        LoginMachine: getGuid(),
        JYEPass: hex_md5(this.passwordVal)
      }).then(res => {
        if (res.data.Success) {
          this.isShowBuy = false;
          this.getFundWelList();
        }
        Toast({
          message: res.data.Content,
          duration: 3000
        });
        this.pws1 = "";
        this.pws2 = "";
        this.pws3 = "";
        this.pws4 = "";
        this.pws5 = "";
        this.pws6 = "";
      });
    }
  },
  destroyed() {
    clearTimeout(this.countDownTimer);
  }
};
</script>
<style lang="stylus" scoped>
.fund {
  .header {
    padding-top: 0.54rem;
    box-sizing: border-box;
    width: 7.5rem;
    height: 2.38rem;
    background: linear-gradient(90deg, rgba(0, 174, 255, 1), rgba(0, 180, 255, 1), rgba(0, 120, 255, 1));
  }

  .payMask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

    .mian {
      width: 7.04rem;
      height: 7.1rem;
      background: #FFF;
      border-radius: 0.2rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;

      .title {
        width: 6.67rem;
        line-height: 1.08rem;
        border-bottom: 1px solid rgba(230, 230, 230, 1);
        margin: 0 auto;
        font-size: 16px;
        font-weight: 500;

        i {
          float: left;
        }
      }

      .content1 {
        width: 6.63rem;
        height: 3rem;
        margin: 0.5rem auto;
        border-bottom: 1px solid rgba(137, 137, 137, 1);
        text-align: center;
        box-sizing: border-box;
        padding-top: 0.5rem;

        .p {
          margin: 0.3rem auto;
          font-size: 14px;
        }

        .txt {
          font-weight: 500;

          .ps {
            font-size: 30px;
            display: inline-block;
            position: relative;
            bottom: 5px;
          }

          span {
            font-size: 40px;
          }
        }
      }

      .inputBox {
        width: 6.32rem;
        height: 0.93rem;
        display: flex;
        margin: 0.07rem auto;

        input {
          width: 1.03rem;
          flex: 1;
          border: 1px solid rgba(203, 203, 203, 1);
          text-align: center;
        }
      }

      .inputBox1 {
        input {
          width: 100%;
          text-align: left;
          letter-spacing: 0.81rem;
          padding-left: 0.5rem;
        }
      }
    }
  }

  .content {
    width: 7.1rem;
    height: 8rem;
    // background: pink;
    margin: 0 auto;
    position: relative;
    top: -50px;

    .tab {
      height: 1.79rem;
      background: #FFF;
      border-radius: 0.2rem;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .item {
        width: 1rem;
        height: 1.4rem;

        img {
          width: 100%;
        }

        .txt {
          font-size: 12px;
          text-align: center;
          color: #666666;
        }
      }

      .arrow-up {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 8px solid #fff;
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    ul {
      li {
        width: 7.1rem;
        // height: 3.54rem;
        background: #FFF;
        border-radius: 0.2rem;
        margin: 8px 0;
        padding: 0.2rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        .main {
          width: 100%;
          height: 2.4rem;
          // background: pink;
          display: flex;

          .mian_left {
            width: 1.5rem;
            flex: 0 1 1.5rem;
            background: #fff;

            img {
              width: 0.97rem;
              height: 0.94rem;
              display: block;
              margin: 0 auto;
            }
          }

          .mian_right {
            flex: 1;
            display: flex;
            flex-direction: column;

            .rigth_item {
              width: 100%;
              flex: 1;
            }

            .rigth_item1 {
              border-bottom: 1px solid #E6E6E6;

              .title {
                display: flex;

                .item {
                  flex: 1;
                  font-size: 11px;

                  img {
                    width: 0.26rem;
                    height: 0.26rem;
                    display: inline-block;
                    margin-bottom: 2px;
                  }
                }

                .time1 {
                  color: #FEA809;
                }

                .time2 {
                  color: #97ED2D;
                }

                .time3 {
                  color: #727477;
                }
              }

              p {
                color: #5A5A5A;
                margin: 10px 0;
                font-size: 12px;

                .bili {
                  color: #9F9F9F;
                  margin-left: 5px;
                }
              }

              .psType {
                color: #9F9F9F;
                font-size: 12px;

                span {
                  color: #000;
                }
              }
            }

            .rigth_item2 {
              display: flex;

              .bm {
                flex: 1;
                display: flex;
                flex-direction: column;
                font-size: 12px;

                .bmItem {
                  padding-top: 8px;
                  flex: 1;
                }

                .key {
                  color: #9F9F9F;
                }

                .val {
                  color: #5A5A5A;
                }

                .time1 {
                  color: #FEA809;
                }

                .time2 {
                  color: #97ED2D;
                }

                .time3 {
                  color: #727477;
                }
              }

              .bm3 {
                width: 2.2rem;
                flex: 0 1 2.2rem;
              }
            }
          }
        }

        .btn {
          width: 100%;
          flex: 1;
          display: flex;
          align-items: center;
          margin-top: 8px;
          position: relative;

          .tiao {
            width: 3.8rem;
            height: 0.13rem;
            border-radius: 5px;
            overflow: hidden;
            background: rgba(159, 159, 159, 1);

            .ing {
              position: relative;
              left: -1px;
              height: 105%;
              border-radius: 5px;
            }

            .ing1 {
              background: linear-gradient(-90deg, rgba(255, 165, 7, 1), rgba(241, 214, 74, 1));
            }

            .ing2 {
              background: linear-gradient(-90deg, rgba(106, 218, 28, 1), rgba(146, 235, 43, 1));
            }

            .ing3 {
              background: linear-gradient(-90deg, rgba(0, 102, 255, 1), rgba(0, 180, 255, 1));
            }
          }

          span {
            font-size: 12px;
            margin-left: 10px;
          }

          .btn_get {
            width: 1rem;
            text-align: center;
            font-size: 12px;
            padding: 0.12rem 0.13rem;
            margin-left: 0.7rem;
            border-radius: 0.17rem;
            color: #fff;
            position: absolute;
            right: 0;
          }

          .btn_get1 {
            background: #FEA809;
          }

          .btn_get2 {
            background: #6ADA1C;
          }

          .btn_get3 {
            background: #0087FF;
          }
        }

        .limit {
          font-size: 9px;
          text-align: right;
          margin-top: 12px;
        }
      }
    }
  }

  .buyMask {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 1, 3, 0.9);
    text-align: center;

    .mian {
      width: 7.04rem;
      height: 7.1rem;
      background: #FFF;
      border-radius: 0.2rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      .title {
        width: 6.63rem;
        margin: 0 auto;
        line-height: 1.1rem;
        height: 1.1rem;
        border-bottom: 1px solid rgba(137, 137, 137, 1);
        text-align: center;
        font-size: 17px;

        .iconfont {
          position: absolute;
          left: 18px;
          top: 5px;
        }
      }

      p {
        width: 90%;
        margin: 0.8rem auto 0.3rem auto;
        height: 0.6rem;

        input {
          width: 4.5rem;
          height: 0.6rem;
          border-radius: 5px;
          background: #999;
          margin-left: 10px;
          color: #fff;
          padding-left: 5px;
        }

        input::placeholder {
          color: #fff;
        }
      }

      .txt {
        text-align: center;
        color: rgba(40, 44, 52, 1);
        margin: 0.5rem auto;
      }

      .hiwaat {
        margin: 0.6rem auto;
        color: #B8B8B8;
      }

      .btn {
        text-align: center;
        color: #FFF;
        width: 6.18rem;
        height: 1rem;
        line-height: 1rem;
        background: linear-gradient(-42deg, rgba(250, 81, 5, 1), rgba(253, 110, 17, 1));
        box-shadow: 0px 3px 9px 0px rgba(91, 24, 0, 0.47);
        opacity: 0.97;
        border-radius: 0.1rem;
        margin: 0.5rem auto;
        font-size: 20px;
      }
    }
  }
}
</style>

